<template>
  <check-file ref="RefPdfPreview" />
  <div class="box">
    <!-- 遍历渲染班级、手机号、已填问卷数量 -->
    <a-table :columns="columns" :data-source="data" rowKey="id" :pagination="paginationProps">
      <!-- 微信名+头像 -->
      <template #wx="{ record, text }">
        <a-space> <a-avatar :src="record.avatar_url" />{{ text }} </a-space>
      </template>

      <!-- 真实姓名 -->
      <template #info="{ text }">
        <p v-if="text">{{ text }}</p>
        <p v-else>未填</p>
      </template>

      <!-- 问卷 -->
      <template #count="{ record }">
      <a @click="goPaper(record.id)">{{record.paper_count}}</a>
      </template>

      <!-- 简历下载 -->
      <template #resume="{ record, text }">
        <div v-if="text">
          <a-space>
            <a @click="openPdfPreview(record.resume_url)">预览</a>
            <a @click="download(record.resume_url,record.nick_name,record.name)">下载</a>
          </a-space>
        </div>
        <p v-else style="color: red">未上传简历</p>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, Ref, ref, onMounted } from 'vue'
import { get, post } from '../../../utils/request/request'
import { PlusOutlined } from "@ant-design/icons-vue";
import CheckFile from "../../../components/CheckFile.vue";
import axios from 'axios'
import { useRoute, useRouter } from "vue-router";

// 表头
const columns = [
  {
    title: '微信',
    dataIndex: 'nick_name',
    align: 'center',
    width: '15%',
    slots: { customRender: 'wx' }
  },
  { title: '姓名', dataIndex: 'name', width: '15%', align: 'center', slots: { customRender: 'info' } },
  { title: '班级', dataIndex: 'class_name', width: '15%', align: 'center', slots: { customRender: 'info' } },
  { title: '手机号', dataIndex: 'phone', width: '15%', align: 'center', slots: { customRender: 'info' } },
  {
    title: '已填写问卷数量',
    dataIndex: 'paper_count',
    align: 'center',
    width: '15%',
    slots: { customRender: 'count' }
  },
  {
    title: '简历下载',
    dataIndex: 'resume_url',
    align: 'center',
    width: '15%',
    slots: { customRender: 'resume' }
  }
]

// 表格数据
interface DataItem {
  id: number
  name: string
  role: number | string
  username: string
}

const data: Ref<DataItem[]> = ref([])

// 分页配置
const useTableDataEffect = (token: string) => {
  const paginationProps = ref({
    current: 1,
    pageSize: 10,
    total: 20,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'],
    // showQuickJumper: true,
    showTotal: (total: string) => `共${total}位小程序用户`,
    onChange: (current: number, pageSize: number) => changePage(current, pageSize),
    onShowSizeChange: (current: number, pageSize: number) => changePage(current, pageSize)
  })

  const changePage = async (pageNumber: number, pageSize: number) => {
    const res: any = await get(`/admin/api/v1/user/list?page=${pageNumber}&limit=${pageSize}`, token)
    paginationProps.value.current = res?.pagination?.page
    paginationProps.value.pageSize = res?.pagination?.limit
    paginationProps.value.total = res?.pagination?.total
    data.value = res?.data
  }
  return { paginationProps, changePage }
}

// 下载简历
const usedownloadEffect = (token: string) => {
  const download = (resume_url: string, nick_name:string,name:string) => {
    if (resume_url) {
      axios
        .get(`${resume_url}`, {
          headers: { 'Content-Type': 'multipart/form-data', Authorization: token },
          responseType: "blob",
        })
        .then((res) => {
          console.log("请求成功", res.data);
          const blob = new Blob([res.data], {
            type: "application/octet-stream",
          });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = `${nick_name}.pdf`;
          a.click();
          window.URL.revokeObjectURL(url);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };
  return { download };
};

// 预览pdf文件
const usePdfPreviewEffect = () => {
  const RefPdfPreview = ref()
  const openPdfPreview = (resume_url: string) => {
    RefPdfPreview.value.pdfPreview(resume_url)
  }
  return { RefPdfPreview, openPdfPreview }
}

// 跳转到用户问卷列表
const go = () => {
  const router = useRouter()
const goPaper = (id: number) => {
    router.push({
      name: 'userPaperList',
      params: {
        id: id,
      }
    })
  }
  return{goPaper}
}

export default defineComponent({
  components: {
    PlusOutlined,
    CheckFile,
  },
  setup() {
    const token: string = localStorage.getItem('token') as string
    const { paginationProps, changePage } = useTableDataEffect(token)
    const { download } = usedownloadEffect(token);
    const { RefPdfPreview, openPdfPreview } = usePdfPreviewEffect();
    const { goPaper } = go();

    onMounted(() => {
      changePage(paginationProps.value.current, paginationProps.value.pageSize)
    })

    return {
      data,
      columns,
      paginationProps,
      changePage,
        download,
      RefPdfPreview,
      openPdfPreview,
      goPaper
    }
  }
})
</script>

<style lang="less" scoped></style>

